<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用jQuery完成表格隔行换色</title>
		<script src="../../js/jquery-1.11.0.min.js"></script>
		<script>
			$(function () {
				/*$("tbody tr:odd").css("background-color","#FBEOC3");
				$("tbody tr:even").css("background-color","FFBB98");*/
				$("tbody tr:odd").css("background-color","rgb(255,239,213)");
				$("tbody tr:even").css("background-color","rgb(255,222,173)");

				$("tbody tr").mouseover(function () {
					$(this).attr("color",$(this).css("background-color"));
					$(this).css("background-color","yellow");
				});

				$("tbody tr").mouseout(function (){
					var color = $(this).attr("color");
					$(this).css("background-color",color);
				});
			});
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>年龄</th>
				</tr>
			</thead>
			<tbody align="center">
				<tr >
					<td>1</td>
					<td>张三</td>
					<td>22</td>
				</tr>
				<tr >
					<td>2</td>
					<td>李四</td>
					<td>25</td>
				</tr>
				<tr >
					<td>3</td>
					<td>王五</td>
					<td>27</td>
				</tr>
				<tr >
					<td>4</td>
					<td>赵六</td>
					<td>29</td>
				</tr>
				<tr >
					<td>5</td>
					<td>田七</td>
					<td>30</td>
				</tr>
				<tr >
					<td>6</td>
					<td>汾九</td>
					<td>20</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
